<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>eNewStore</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="<c:url value="/assets/css/bootstrap.css"/>" rel="stylesheet">
    <link href="<c:url value="/assets/css/global.css"/>" rel="stylesheet">

    <link href="<c:url value="/assets/css/dataTables.bootstrap.css"/>" rel="stylesheet">


    <script type='text/javascript' src="<c:url value="/assets/js/jquery-2.0.0.min.js"/>"></script>
    <script type='text/javascript' src="<c:url value="/assets/js/jquery.dataTables.min.js"/>"></script>
    <script type='text/javascript' src="<c:url value="/assets/js/dataTables.bootstrap.js"/>"></script>
    <script type='text/javascript' src="<c:url value="/assets/js/bootstrap.min.js"/>"></script>

</head>

<!-- HTML code from Bootply.com editor -->

<body>

<!-- Header -->
<jsp:include page="../Menu_template/menuHeader.jsp"/>

<!-- Main -->
<div class="container">
    <!-- upper section -->
    <div class="row">
        <!-- NOM D MENU Gauche à INTEGRER EN FONCTION DU SERVICE -->

        <!-- /span-3 -->
        <jsp:include page="../Menu_template/menu_sideReappro.jsp"/>
        <div class="col-wmd-9">

            <!-- column 2 -->
            <a href="#"><strong><i class="glyphicon glyphicon-dashboard"></i> Stock Picking</strong></a>
            <hr>
            <div class="row">
                <!-- center left-->
                <div class="col-md-8">

                    <div class="panel-body">
                        <table id="example" class="table table-striped table-bordered"
                               style="border-collapse:collapse;" cellspacing="0" width="100%">
                            <thead>
                            <tr>
                                <th>RefArticle</th>
                                <th>Libelle</th>
                                <th>Provenance</th>
                                <th>Nb Article Fou</th>
                                <th>Total Articles</th>
                                <th>Nb Palette Fou</th>
                                <th>Total Palettes</th>
                            </tr>
                            </thead>

                            <tbody>

                            <form class="form-signin" role="form" action="/stockGlobal/picking" method="POST">
                                <c:forEach var="article" items="${lstPalettePicking}" varStatus="loop">
                                    <c:set var="iIDTarget" value="Demo${loop.index}"/>

                                    <tr data-target="${iIDTarget}" class="getsub">
                                        <td>${article.sRefArticle}</td>
                                        <td>${article.sSousCat}</td>
                                        <td>${article.sProvenance}</td>
                                        <td>${article.eQteArticleByFournisseur}</td>
                                        <td>${article.eQteTotale}</td>
                                        <td>${article.eQtePaletteByFournisseur}</td>
                                        <td>${article.eQteTotalePalette}</td>


                                    </tr>
                                </c:forEach>
                            </form>
                            </tbody>

                            <div id="subtables">
                                <c:forEach var="article" items="${lstPalettePicking}" varStatus="loop">
                                    <c:set var="iIDTarget" value="Demo${loop.index}"/>
                                    <div id="${iIDTarget}">
                                        <c:forEach var="info" items="${article.lstInfo}" varStatus="loop">
                                            <p>${info.sConditionnement} : ${info.eUnite} --> ${info.fPoids} Kg </p>
                                        </c:forEach>
                                    </div>
                                </c:forEach>
                            </div>
                        </table>
                    </div>
                        <!--/panel-body-->
                </div>
                <!--/col-->
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $('#example').dataTable({
                "oLanguage": {
                    "sProcessing": "Traitement en cours...",
                    "sSearch": "Rechercher&nbsp;:",
                    "sLengthMenu": "Afficher _MENU_ &eacute;l&eacute;ments",
                    "sInfo": "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                    "sInfoEmpty": "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                    "sInfoFiltered": "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                    "sInfoPostFix": "",
                    "sLoadingRecords": "Chargement en cours...",
                    "sZeroRecords": "Aucun &eacute;l&eacute;ment &agrave; afficher",
                    "sEmptyTable": "Aucune donnée disponible dans le tableau",
                    "oPaginate": {
                        "sFirst": "Premier",
                        "sPrevious": "Pr&eacute;c&eacute;dent",
                        "sNext": "Suivant",
                        "sLast": "Dernier"
                    },
                    "oAria": {
                        "sSortAscending": ": activer pour trier la colonne par ordre croissant",
                        "sSortDescending": ": activer pour trier la colonne par ordre décroissant"
                    }
                },
                "aLengthMenu": [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "Tous"]
                ]
            });

            //recherche toutes les lignes du tableau
            var subs = document.querySelectorAll('.getsub');
            for (var i = 0; i < subs.length; i++) {
                //pour chaque ligne on affecte un click
                subs[i].onclick = function () {
                    //lis l'attribut data-target de ma ligne
                    var target = this.getAttribute('data-target');
                    //vérifie que l"élément recherché n'existe pas dans le tableau
                    if (!this.parentNode.querySelector('#' + target)) {

                        //Je créer ma nouvelle ligne
                        var tr = document.createElement('tr');
                        tr.className = 'subcontent';

                        var td = document.createElement('td');
                        td.setAttribute('colspan', 8);
                        tr.appendChild(td);
                        td.appendChild(document.getElementById(target).cloneNode(true));
                        this.parentNode.insertBefore(tr, this.nextSibling);
                    } else {

                        var get = this.parentNode.querySelector('#' + target);
                        if (get) {
                            var del = get.parentNode.parentNode;
                            del.parentNode.removeChild(del);
                        }
                    }
                };
            }

        });






    </script>
</div>
</body>
</html>